<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">

		
			<view class="top">
				<view class="box">
					<view class="title">
						规格
					</view>
					<scroll-view scroll-x="true">
						<view class="class">
							<view class="classItem" :class="index === info.specificationActive?'classactive':''" @click="onClick(index,'specificationActive')"
								v-for="(item,index) in info.specificationList" :key="index">
								{{item.value}}
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="box">
					<view class="title">
						厚度
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.thicknessActive?'classactive':''" @click="onClick(index,'thicknessActive')"
								v-for="(item,index) in info.thicknessList" :key="index">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="box">
					<view class="title">
						颜色
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.colorActive?'classactive':''" @click="onClick(index,'colorActive')"
								v-for="(item,index) in info.colorList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="box">
					<view class="title">
						光泽度
					</view>
					<scroll-view scroll-x="true">
						<view class="class">
							<view class="classItem" :class="index === info.glossActive?'classactive':''" @click="onClick(index,'glossActive')"
								v-for="(item,index) in info.glossList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="box">
					<view class="title">
						色类
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.colorTypeActive?'classactive':''" @click="onClick(index,'colorTypeActive')"
								v-for="(item,index) in info.colorTypeList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="box">
					<view class="title">
						适用
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.applyActive?'classactive':''" @click="onClick(index,'applyActive')"
								v-for="(item,index) in info.applyList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="box">
					<view class="title">
						工艺
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.technologyAcitve?'classactive':''" @click="onClick(index,'technologyAcitve')"
								v-for="(item,index) in info.technologyList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="box">
					<view class="title">
						品类
					</view>
					<scroll-view scroll-x="true">
						<view class="class">

							<view class="classItem" :class="index === info.categoryActive?'classactive':''" @click="onClick(index,'categoryActive')"
								v-for="(item,index) in info.categoryList" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>


		<view class="">


			<view class="goodslist">
				<view class="goodslistItem" @click="topage(item)" v-for="(item,index) in dataList" :key="index">
					<image class="goodslistItemimg" :src="item.design_image" mode=""></image>
					<view class="goodslistItemname xml32 xpb10">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
	</z-paging>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	let test = ref("测试")
	import {
		searchspec,
		searchthickness,
		searchcolor,
		searchgloss,
		searchColorType,
		searchapply,
		searchcategory,
		searchtechnology,
		searchlists
	} from '@/network/home.js'



	let info = reactive({

		// 规格
		specificationList: [],
		specificationActive: '',

		// 厚度
		thicknessList: [],
		thicknessActive: '',

		// 颜色
		colorList: [],
		colorActive: '',

		// 光泽度
		glossList: [],
		glossActive: '',

		// 色类
		colorTypeList: [],
		colorTypeActive: '',

		// 适用
		applyList: [],
		applyActive: '',

		// 工艺
		technologyList: [],
		technologyAcitve: '',

		// 品类
		categoryList: [],
		categoryActive: ''

	})


	// 获取筛选数据
	
	const topage = (data) => {
		uni.navigateTo({
			url: '/pages/index/goodsDetails?id=' + data.id
		})
	}


	const getseach = async () => {
		// 获取规格
		let specification = await searchspec()
		info.specificationList = specification.data

		// 厚度
		let thickness = await searchthickness()
		info.thicknessList = thickness.data


		// 颜色
		let color = await searchcolor()
		info.colorList = color.data

		// 光泽度
		let gloss = await searchgloss()
		info.glossList = gloss.data

		// 色类
		let colorType = await searchColorType()
		info.colorTypeList = colorType.data

		// 适用
		let apply = await searchapply()
		info.applyList = apply.data
		// 工艺
		let technology = await searchtechnology()
		info.technologyList = technology.data

		// 品类
		let category = await searchcategory()
		info.categoryList = category.data


	}
	
	
	const onClick = (index,name) =>{
		if(info[name] === index){
			info[name] = ''
			paging.value.reload()
		}else {
			info[name] = index
			paging.value.reload()
		}
		
	}
	
	
	const paging = ref(null)
	const dataList = ref([])
	
	const queryList = (pageNo, pageSize) => {
		searchlists({
			page_no:pageNo,
			page_size:pageSize,
			spec_id:info.specificationActive !== '' ? info.specificationList[info.specificationActive].id : 0,
			thickness:info.thicknessActive !== '' ? info.thicknessList[info.thicknessActive] : 0,
			typeb_id:info.colorActive !== '' ? info.colorList[info.colorActive].id : 0,
			gloss_id:info.glossList[info.glossActive] ? info.glossList[info.glossActive].id : 0,
			typee_id:info.colorTypeActive !== '' ?info.colorTypeList[info.colorTypeActive].id : 0,
			typec_id:info.applyActive !== '' ? info.applyList[info.applyActive] : 0,
			technology_id: info.technologyAcitve !== '' ?info.technologyList[info.technologyAcitve].id : 0,
			typed_id:info.categoryActive !== '' ? info.categoryList[info.categoryActive].id : 0,
			
		}).then(res => {
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	
	
	getseach()
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.box {
		padding: 10rpx 30rpx;
		box-sizing: border-box;

	}

	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 19rpx;

	}

	.class {
		display: flex;
		margin-bottom: 29rpx;

	}

	.classItem {

		background: #EEEEEE;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;


	}

	.classactive {
		background: #000000;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.top {
		background-color: #fff;
	}


	.goodslist {
		padding: 31rpx;
		box-sizing: border-box;
		display: grid;
		gap: 20rpx 20rpx;

		grid-template-columns: repeat(2, 1fr);


	}

	.goodslistItem {
		width: 335rpx;
		height: 748rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.goodslistItemimg {
		width: 100%;
		height: 660rpx;
		background: #333;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.goodslistItemname {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		margin-top: 23rpx;
		margin-left: 20rpx;
	}
</style>